<template>
  <div class="simi">
    <div class="simi-one" v-for="item in simiList" :key="item.id">
      <div class="simi-one-left">
        <img v-lazy="item.cover" alt="" />
        <div class="count">
          <i class="iconfont icon-shipin"></i>
          <span>{{ item.playCount }}</span>
        </div>
      </div>
      <div class="simi-one-right">
        <div class="name">
          <el-tag>MV</el-tag>
          <span>{{ item.name.slice(0, 2) + '...' }}</span>
        </div>
        <div>{{ item.artistName }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { _getSimiMv } from '../../../network/mv'
export default {
  props: ['id'],
  data () {
    return {
      simiList: []
    }
  },
  beforeMount () {
    this.getSimiMv()
  },
  methods: {
    async getSimiMv () {
      var res = await _getSimiMv(this.id)
      console.log('----------', res)
      this.simiList = res.data.mvs
    }
  },
  watch: {
    id () {
      this.getSimiMv()
    }
  }
}
</script>
<style lang="less" scoped>
.simi {
  width: 100%;
  padding: 6px;
  &-one {
    width: 100%;
    display: flex;
    height: 130px;
    margin-top: 15px;
    &-left {
      position: relative;
      width: 70%;
      height: 130px;
      img {
        width: 100%;
        height: 130px;
      }
      .count {
        display: flex;
        position: absolute;
        right: 10px;
        top: 4px;
      }
    }
    &-right {
      height: 130px;
      flex: 1;
      .name {
        height: 40px;
        margin-bottom: 70px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
